<template>
  <div class="page-index">
    <PageHeader title="我的账本"></PageHeader>
    <div class="top">
         <div class="top_left" v-if="checkShow">
        <input  type='checkbox'/>  全选
      </div>
      <div class="top_left"  v-else>账单选择</div>
     
      <div class="top_right">
        <div class="top_right_img">
          <img
            src="../../assets/books/select.png"
            alt=""
            class="top_right_img_icon"
          />
        </div>
        <div @click="openDarw()" class="top_right_title">筛选</div>
      </div>
    </div>
    <div class="center">
      <van-collapse v-model="activeNames">
        <van-collapse-item name="1">
          <template #title>
            <div>2022年5月</div>
          </template>
          <div class="center_list "  v-for="(items,invoiceIndex) in list" :key="invoiceIndex">
            <div>
              <van-swipe-cell>
                <div class="center_list_left">
                  <div class="checks" v-if="checkShow" >
                 <input :id='items.id' type="checkbox" :checked="items.checked" @click.stop="selectItem(items,invoiceIndex)"/>
                    <!-- <van-checkbox v-model="checked" :name="items.id"  @change="handleCheck"></van-checkbox> -->
                  </div>
                  <div
                    class="center_list_left_top"
                    @touchstart="gtouchstart()"
                    @touchmove="gtouchmove()"
                    @touchend="showDeleteButton()"
                  >
                    <div class="center_list_left_top_box">
                      <div class="center_list_left_top_img">
                        <img
                          src="../../assets/books/selec.png"
                          alt=""
                          class="center_list_left_top_title_icon"
                        />
                      </div>
                      <div class="center_list_left_top_box_title">
                        <div class="center_list_left_top_box_title_title">
                          年会团建活动
                        </div>
                        <div class="center_list_left_top_box_title_type">
                          <span class="ftFy">分摊</span>
                        </div>
                      </div>
                      <div class="center_list_left_top_box_title_num">
                        ￥ 2080.00
                      </div>
                    </div>
                  </div>
                  <div class="center_list_left_bottom">
                    <div class="center_list_left_bottom_left">
                      <div class="center_list_left_bottom_left_place">
                        消费城市 : 松江区
                      </div>
                      <div class="center_list_left_bottom_left_img">
                        <img
                          src="../../assets/books/place.png"
                          alt=""
                          class="center_list_left_bottom_left_img_icon"
                        />
                      </div>
                    </div>
                    <div class="center_list_left_bottom_left_time">
                      消费时间：2022-05-19
                    </div>
                  </div>
                </div>
                <template #right>
                  <div class="copy_btn">
                    <img
                      class="copy_btn_icon"
                      src="../../assets/books/copy.png"
                      alt=""
                    />
                  </div>
                  <div class="del_btn">
                    <img
                      class="del_btn_icon"
                      src="../../assets/books/del.png"
                      alt=""
                    />
                  </div>
                  <!-- <div class="btn_box">
                        <div class="btn_box_copy">
                            <div class="btn_box_copy_img">
                                <img src="../../assets/books/copy.png" alt="" class="btn_box_copy_img_icon">
                            </div>
                            <div class="btn_box_copy_title">复制</div>
                        </div>
                        <div class="btn_box_del">
                             <div class="btn_box_del_img">
                                <img src="../../assets/books/del.png" alt="" class="btn_box_del_img_icon">
                            </div>
                            <div class="btn_box_del_title">移除</div>
                        </div> -->

                  <!-- </div> -->
                  \
                  <van-button
                    square
                    text="删除"
                    type="danger"
                    color="rgba(255, 195, 0, 1)"
                    class="delete-button"
                  />
                  <van-button
                    square
                    text="复制"
                    type="danger"
                    color="rgba(255, 68, 0, 1)"
                    class="delete-button"
                  />
                </template>
              </van-swipe-cell>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
    <div class="selectDarw">
      <van-popup
        :safe-area-inset-bottom="true"
        round
        v-model="show"
        position="top"
        :style="{ height: '60%' }"
      >
        <div class="type_list">
          <div class="selectDarw_type">状态</div>
          <div class="select_list_tab">
            <div class="labeloption" @click="changeStatus(1)">
              <span class="btn" :class="{ checked: typeActive == 1 }"
                >未报销</span
              >
            </div>
            <div class="labeloption" @click="changeStatus(2)">
              <span class="btn" :class="{ checked: typeActive == 2 }"
                >已报销</span
              >
            </div>
            <div class="labeloption" @click="changeStatus(3)">
              <span class="btn" :class="{ checked: typeActive == 3 }"
                >免报销</span
              >
            </div>
            <div class="labeloption" @click="changeStatus(4)">
              <span class="btn" :class="{ checked: typeActive == 4 }"
                >已移除</span
              >
            </div>
          </div>
        </div>
        <div class="type_lists">
          <div class="selectDarw_type">排序分组</div>
          <div class="select_list_tab">
            <div class="labeloption" @click="setStauts(1)">
              <span class="btn" :class="{ checked: setActive == 1 }"
                >创建时间</span
              >
            </div>
            <div class="labeloption" @click="setStauts(2)">
              <span class="btn" :class="{ checked: setActive == 2 }"
                >浪费时间</span
              >
            </div>
            <div class="labeloption" @click="setStauts(3)">
              <span class="btn" :class="{ checked: setActive == 3 }"
                >费用类型</span
              >
            </div>
          </div>
        </div>
        <div class="btns">
          <div class="btn_CZ">
            <span>重置</span>
          </div>
          <div class="btn_set">
            <span>保存</span>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script>
import PageHeader from "../../../src/components/header";
export default {
  data() {
    return {
      ico: require("../../assets/newCost/flag.png"),
      title: "飞机",
      activeNames: ["1"],
      show: false, //筛选的弹出层
      typeActive: 1,
      setActive: 1,
      checked: false,
      checkShow: false,
      list: [{id: 1},{id: 2},{id: 3}, {id: 4}],
    };
  },
  components: {
    PageHeader,
  },
  methods: {
   	selectItem(item,index){
              console.log(index,'判断勾选的是哪条数据')
              console.log(item,"选择的发票")
              item.checked=!item.checked
              if(item.checked===false){
                this.selectedList.splice(index,1);
                this.sumMoney = Number(this.sumMoney) - Number(item.amount)
                this.sumMoney=Number(this.sumMoney.toFixed(2))
                this.checkAllBox=false
              }else{
                this.sumMoney = Number(this.sumMoney) + Number(item.amount)
                this.sumMoney=Number(this.sumMoney.toFixed(2))
                console.log(this.sumMoney,"======")
                this.selectedList.push(item)
              }
              console.log(this.selectedList,"+++++this.selectedList")
              console.log(this.selectedList.length,"+++++this.selectedList.length")
              this.checkAllBox = this.list.every((item) => {
                  return item.checked === true
              })
            },
    gtouchstart() {
      var self = this;
      this.timeOutEvent = setTimeout(function () {
        self.longPress();
      }, 500); //这里设置定时器，定义长按500毫秒触发长按事件
      return false;
    },
    //手释放，如果在500毫秒内就释放，则取消长按事件，此时可以执行onclick应该执行的事件
    showDeleteButton() {
      clearTimeout(this.timeOutEvent); //清除定时器
      if (this.timeOutEvent != 0) {
        //这里写要执行的内容（如onclick事件）
        console.log("点击但未长按");
      }
      return false;
    },
    //如果手指有移动，则取消所有事件，此时说明用户只是要移动而不是长按
    gtouchmove() {
      clearTimeout(this.timeOutEvent); //清除定时器
      this.timeOutEvent = 0;
    },
    //真正长按后应该执行的内容
    longPress(val) {
      this.timeOutEvent = 0;
      //执行长按要执行的内容，如弹出菜单
      console.log("长按");
      this.checkShow = true;
    },
    // 选择状态
    changeStatus(number) {
      console.log(number, "5555");
      this.typeActive = number;
    },
    // 排序分组
    setStauts(number) {
      console.log(number, "5555");
      this.setActive = number;
    },
    // 打开顶部弹出层
    openDarw() {
      this.show = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .header {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 9999;
}
.top {
  margin-top: 80px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 4px 8px rgb(238 238 238);
  display: flex;
  justify-content: space-between;
  .top_left {
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    /* padding: 15px 0 16px; */
    padding: 15px 0 15px 16px;
  }
  .top_right {
    display: flex;
    padding: 16px 16px 16px 0;
    .top_right_img {
      vertical-align: middle;
      margin-right: 6px;
      padding: 2px 0 0 0;
      .top_right_img_icon {
        width: 16px;
        height: 16px;
      }
    }
    .top_right_title {
      color: rgba(102, 102, 102, 1);
      font-size: 14px;
    }
  }
}
.center {
}
::v-deep .van-cell__title {
  text-indent: 24px !important;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
}
::v-deep .van-cell__right-icon {
  position: absolute;
  top: 10px;
}
::v-deep .van-button--danger {
  //   font-size: 1.73vw;
  //     margin-left: 3px;
}

.delete-button {
  height: 100%;
  border-radius: 7px;
  margin-left: 3px;
}
.center_list_left {
  background: rgba(23, 119, 255, 0.03);
  border: 1px solid rgba(23, 119, 255, 0.1);
  box-shadow: 0px 4px 8px rgb(238 238 238);
  border-radius: 8px;
  .checks {
    z-index: 999;
    position: absolute;
    top: 39px;
    left: 10px;
  }
  .center_list_left_top {
    padding-bottom: 24px;
    .center_list_left_top_box {
      position: relative;
      display: flex;
      justify-content: space-between;
      .center_list_left_top_img {
        position: absolute;
        left: 32px;
        top: 15px;
        .center_list_left_top_title_icon {
          width: 32px;
        }
      }
      .center_list_left_top_box_title {
        padding: 12px 0 0 72px;
        .center_list_left_top_box_title_title {
          color: rgba(0, 0, 0, 1);
          font-size: 14px;
          font-weight: 700;
        }
        .center_list_left_top_box_title_type {
          color: rgba(23, 119, 255, 1);
          font-size: 12px;

          border-radius: 2px;
          .ftFy {
            background: rgba(23, 119, 255, 0.1);
            padding: 2px;
          }
        }
      }
      .center_list_left_top_box_title_num {
        color: rgba(51, 51, 51, 1);
        font-size: 18px;
        padding: 24px 24px 0 0;
      }
    }
  }
  .center_list_left_bottom {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    .center_list_left_bottom_left {
      position: relative;
      .center_list_left_bottom_left_place {
        color: rgba(102, 102, 102, 1);
        font-size: 12px;
        padding-left: 42px;
      }
    }
    .center_list_left_bottom_left_img {
      position: absolute;
      left: 26px;
      top: 1px;
      .center_list_left_bottom_left_img_icon {
        width: 13px;
        height: 17px;
      }
    }
    .center_list_left_bottom_left_time {
      color: rgba(153, 153, 153, 1);
      font-size: 12px;
      padding-right: 16px;
    }
  }
}
.copy_btn {
  position: absolute;
  z-index: 999;
  left: 31px;
  top: 24px;
  .copy_btn_icon {
    width: 20px;
  }
}
.del_btn {
  position: absolute;
  z-index: 999;
  right: 5.67vw;
  top: 24px;
  .del_btn_icon {
    width: 20px;
  }
}
.type_lists {
  .selectDarw_type {
    margin: 0 0 0 15px;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-weight: 700;
  }
}
.type_list {
  margin-top: 103px;
  .selectDarw_type {
    margin: 0 0 0 15px;
    color: rgba(51, 51, 51, 1);
    font-size: 14px;
    font-weight: 700;
  }
}
.labeloption {
  flex: 0 0 33%;
  padding: 15px 0;
  //   margin: 10px;
}
.checked {
  background: rgba(23, 119, 255, 0.05);
  border: 1px solid rgba(16, 142, 233, 1);
  border-radius: 15px;
  padding: 8px 30px;
}
.btn {
  background: rgba(245, 245, 245, 1);
  border-radius: 15px;
  padding: 8px 22px;
}
.select_list_tab {
  display: flex;
  flex-wrap: wrap;
}
.btns {
  display: flex;
  margin-top: 30px;
  justify-content: space-around;
  .btn_CZ {
    background: rgba(23, 119, 255, 0.05);
    border-radius: 18px;
    padding: 6px 60px;
    color: rgba(23, 119, 255, 1);
    font-size: 16px;
  }
  .btn_set {
    background: rgba(23, 119, 255, 1);

    border-radius: 18px;
    padding: 6px 60px;
    // color: rgba(23, 119, 255, 1);
    font-size: 16px;

    color: rgba(255, 255, 255, 1);
    // font-size: 16px;
  }
}
</style>
